/*------------------------------*/
/*---------Define Fonts---------*/
/*------------------------------*/

/*---- Supermarket Font----*/
@font-face{	font-family: Supermarket; 
			src: url('../fonts/supermarket.otf');
			src: url('../fonts/supermarket.eot'); /* IE9*/
			src: url('../fonts/supermarket.eot?') format('eot'),  /* IE6-IE8 */
			url('../fonts/supermarket.ttf')  format('truetype'), /* Safari, Android, iOS */
			url('../fonts/supermarket.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
font-weight: normal; font-style: normal;}

/*---- TH Saraban New Font----*/
@font-face{	font-family: THSarabunNew; 
			src: url('../fonts/THSarabunNew.otf');
			src: url('../fonts/THSarabunNew.eot'); /* IE9*/
			src: url('../fonts/THSarabunNew.eot?') format('eot'),  /* IE6-IE8 */
			url('../fonts/THSarabunNew.woff') format('woff'), /* Modern Browsers */
			url('../fonts/THSarabunNew.ttf')  format('truetype'), /* Safari, Android, iOS */
			url('../fonts/THSarabunNew.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
font-weight: normal; font-style: normal;}
@font-face{	font-family: THSarabunNew; 
			src: url('../fonts/THSarabunNewBold.otf');
			src: url('../fonts/THSarabunNewBold.eot'); /* IE9*/
			src: url('../fonts/THSarabunNewBold.eot?') format('eot'),  /* IE6-IE8 */
			url('../fonts/THSarabunNewBold.woff') format('woff'), /* Modern Browsers */
			url('../fonts/THSarabunNewBold.ttf')  format('truetype'), /* Safari, Android, iOS */
			url('../fonts/THSarabunNewBold.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
font-weight: bold;}

@font-face{	font-family: THSarabunNew; 
			src: url('../fonts/THSarabunNewItalic.otf');
			src: url('../fonts/THSarabunNewItalic.eot'); /* IE9*/
			src: url('../fonts/THSarabunNewItalic.eot?') format('eot'),  /* IE6-IE8 */
			url('../fonts/THSarabunNewItalic.woff') format('woff'), /* Modern Browsers */
			url('../fonts/THSarabunNewItalic.ttf')  format('truetype'), /* Safari, Android, iOS */
			url('../fonts/THSarabunNewItalic.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
font-style:italic;}

@font-face{	font-family: THSarabunNew; 
			src: url('../fonts/THSarabunNewBold.otf');
			src: url('../fonts/THSarabunNewBold.eot'); /* IE9*/
			src: url('../fonts/THSarabunNewBold.eot?') format('eot'),  /* IE6-IE8 */
			url('../fonts/THSarabunNewBold.woff') format('woff'), /* Modern Browsers */
			url('../fonts/THSarabunNewBold.ttf')  format('truetype'), /* Safari, Android, iOS */
			url('../fonts/THSarabunNewBold.svg#svgGraublauweb') format('svg'); /* Legacy iOS */
font-weight: bold; font-style:italic;}

/**************** Body and tag styles ****************/

*{margin:0; padding:0;}

body{ font:76% Verdana,Tahoma,Arial,sans-serif; line-height:1.4em; text-align:center; color:#303030; background:#202020; margin: 0; padding: 0; font-weight:normal;
		background-image:url(../images/web_bg.jpg), url(../images/web_bg.png);
		background-position: 0 21px, 0 0;
		background-repeat:repeat-x, repeat;}

a{ color:#467aa7; font-weight:bold; text-decoration:none; background-color:inherit;}
a:hover{color:#2a5a8a; text-decoration:none; background-color:inherit;}
a img{border:none;}

p{padding:0 0 1.6em 0;}
p form{margin-top:0; margin-bottom:20px;}

img.left,img.center,img.right{padding:4px; border:1px solid #a0a0a0;}
img.left{float:left; margin:0 12px 5px 0;}
img.center{display:block; margin:0 auto 5px auto;}
img.right{float:right; margin:0 0 5px 12px;}

.clear { clear:both; }

#theme_page_container{ width:950px; margin: 5px auto 0; text-align:left; background:#fff; color:#303030; /*border-top: solid 4px #efefef*/}

/**************** Header and navigation styles ****************/

#theme_header{ height:133px; width:100%; margin:0; background:#fff; overflow: hidden;}
#theme_header #logo { 	width: 249px; height: 121px; background:#fff; float: left; top: -10px; left: -10px;
						border-bottom: 6px solid #E07900;  border-top: 6px solid #E07900;}
#theme_header #theme_header_right {width: 701px; height: 121px; float: left; border-bottom: #e07900 solid 6px; border-top: #E07900 solid 6px; }
#theme_header #theme_navigation_bar { color: #000; width: 310px; height: 121px;float: left;}
#theme_header #theme_navigation_bar ul { margin-left: 50px; margin-top: 13px; width: auto; display:block; float: left}
#theme_header #theme_navigation_bar li{ list-style-type:none; white-space:nowrap; height: 25px; width: 90px; margin-top: 0px; }
#theme_header #theme_navigation_bar li a{	display:block; padding:0 10px; font-size:1.4em; font-weight: normal; font-family: Supermarket;
											text-transform:uppercase; text-decoration:none; color: #000; font-size: 16px; -webkit-text-stroke: 0.3px #333;}
#theme_header #theme_navigation_bar li.selected a, #theme_header #theme_navigation_bar li a:hover{ color:#e27800; text-decoration:none; -webkit-text-stroke: 0.3px #E27800;}

#theme_header #theme_header_right #theme_contact_and_search  { width: 237px; height: 101px; float:left; padding: 20px 0 0 0 ;font-size: 18px; }
#theme_header #theme_header_right #theme_contact_and_search p { margin-bottom: 0px !important; }
#theme_header #theme_contact_and_search  .contact_logo{ color: #999;height: 20px; line-height: 20px; padding: 0 0 0 25px; 
														background: transparent url(../images/phone_logo.png) 0 0 no-repeat; }
#theme_header #theme_contact_and_search p { font-weight: bold; }
#theme_header #theme_contact_and_search .tel { font-weight: bold; padding: 0 0 0 25px;}
#theme_header #theme_contact_and_search .search input { color:#a6a6a6; border: #e2e2e2 solid 1px; height: 22px; width: 190px; margin: 10px 0 0 20px ; line-height: 22px; 
														background: #fff url(../images/icon_search.png) top right no-repeat;}
														
#theme_header #theme_social_media_link { width: 132px; height: 101px; float: left; display: block;}
#theme_header #theme_social_media_link ul{ height: 23px; margin: 77px 0 0 0;}
#theme_header #theme_social_media_link li{ height: 23px; float:left; display:block; padding: 0 6px 0 0}
#theme_header #theme_social_media_link li a{}


/**************** Slice & Promotion ****************/
#slide { width: 950px; height: 360px; overflow:hidden;}

/**************** Middle Bar ****************/
#middle_bar { width: 950px; height: 6px;}
#middle_bar #left { width: 250px; height: 6px; float: left; background-color: #fff}
#middle_bar #right { width: 700px; height: 6px; float: left; background-color: #c96d00}

/**************** Content Bar ****************/
#content_bar { width: 950px; height: 6px; margin: 0 0 20px 0}
#content_bar #left { width: 250px; height: 6px; float: left; background-color: #C96D00}
#content_bar #right { width: 700px; height: 6px; float: left; background-color: #c96d00}

/**************** Footer Bar ****************/
#footer_bar { width: 950px; height: 6px;}
#footer_bar #left { width: 250px; height: 6px; float: left; background-color: #fff}
#footer_bar #right { width: 700px; height: 6px; float: left; background-color: #212121}

/**************** Promotion ****************/
#promotion { width: 950px; height: 134px; background: #f5911b url(../images/promotion_bar.jpg) 0 0 repeat;}
#promotion h3{ 	width: 120px; height: 113px; display:block; float:left;  color:#fff; font-size: 36px; margin: 10px 0 0 40px;
				font-family: Supermarket; text-shadow: 1px 1px 3px #993300;  -webkit-text-stroke: 0.3px #fff; letter-spacing:0.5px;} 
#promotion h4{ width: 160px; height: 108px; display:block; float:left;  color:#000; font-size: 20px; margin: 10px 0 0 25px; 
				font-family: Supermarket; text-shadow: 1px 1px 1px #330000; -webkit-text-stroke: 0.3px black; letter-spacing:0.5px;}
#promotion h4 span{ font-size: 30px;}
#promotion p { float: none; padding: 20px 10px 0 0; color: #fff; }
#promotion a { color: #fff; background: transparent;  padding: 10px 0 0 0; font-weight: bold;}
#promotion a:hover { color: #000; background: transparent;}


/**************** Content styles ****************/
#content { width:950px;}

#theme_content{ float:right; width:699px; font-size:0.9em; background: #f0f0f0; border-left: 1px solid #d2d2d2}
#theme_content h2 a{font-weight:normal;}
#theme_content h3{margin:0 0 5px 0; font-size:1.4em; letter-spacing:-1px;}						
#theme_content .pn-block h4{margin:0 0 5px 0; font-size:1.2em; letter-spacing:-1px;}
#theme_content a:hover,#subcontent a:hover{text-decoration:underline;}
#theme_content ul,#theme_content ol{margin:0 5px 16px 35px;}
#theme_content dl{margin:0 5px 10px 25px;}
#theme_content dt{font-weight:bold; margin-bottom:5px;}
#theme_content dd{margin:0 0 10px 15px;}

/**************** Right Block Content ****************/
.right_block {border-bottom: 6px #999 solid; padding-bottom: 10px;}

#theme_content h4 ,#theme_content h3,#theme_content h2,#theme_content h1 {  
height: 40px; line-height: 35px; color: #e27800; padding: 0 0 0 15px; font-weight: normal; font-size: 22px; 
background: #f0f0f0 url(../images/youtube_bg.png); border-bottom: 1px solid #d2d2d2; border-top: 1px solid #d2d2d2;
font-family: Supermarket; /*text-shadow: 1px 1px 1px #777;*/ letter-spacing: 0.3px; -webkit-text-stroke: 0.3px #E27800;
box-shadow: 0 1px 1px #FFFFFF; text-shadow: 1px 1px 1px #993300; }

#theme_content .right_block_content { /*padding: 10px 5px;*/ padding: 0 20px;}
#theme_content .right_block_content .listproduct  { width: 150px; float: left; 
													padding: 0 10px 0 10px; margin: 0 0 20px 0;}
#theme_content .right_block_content .listproduct img { width:150px; box-shadow: 1px 1px 3px #333;}
#theme_content .right_block_content .listproduct a { color:#E27800;}
#theme_content .right_block_content .listproduct > a { 	color: #fff; display: block; margin: 0 auto; width: 100px; background: #F60; height: 20px; 
														line-height: 20px; text-align:center}
#theme_content .right_block_content .listproduct  > a:hover { color: #333;}

/**************** Left Block Content ****************/
#theme_subcontent { float:left; width: 249px; padding:0px; line-height:1.4em; border-right: 1px solid #D2D2D2;}

#theme_subcontent h3,#theme_subcontent h4  {  height: 40px; line-height: 35px; color: #666; padding: 0 0 0 15px; font-weight: normal; font-size: 22px; 
						background: #f0f0f0 url(../images/youtube_bg.png); border-bottom: 1px solid #fff; border-top: 1px solid #d2d2d2; 
						font-family: Supermarket; /*text-shadow: 1px 1px 1px #777;*/ letter-spacing: 0.3px;/* -webkit-text-stroke: 0.3px #E27800;*/
						box-shadow: 0px 1px 0px #d2d2d2;  text-shadow: 1px 1px 1px #666;}
#theme_subcontent .left_block_content{ margin: 10px; /*overflow:hidden;*/ position: relative;}
#theme_subcontent ul { margin: 0 0 0 20px; padding: 10px;}
#theme_subcontent li {color: #F60;}
#theme_subcontent  a { color:#666}
#theme_subcontent a:hover { color:#E27800;}
#theme_subcontent label { color:#999; margin: 0 0 5px 0; display: block;  color: black; font-weight: bold; margin: 0 0 5px;}
#theme_subcontent input { color:#999; margin: 0 0 5px 0; padding: 2px 5px; display: block;}
#theme_subcontent #loginblock_username,
#theme_subcontent #loginblock_password { width: 215px;}
#theme_subcontent select { color: #999;}

/**************** Left Login ****************/
#theme_subcontent input[type="checkbox"] ,#theme_subcontent label[for="loginblock_rememberme"]{ display:inline; margin: 3px 0 0 0;}
#theme_subcontent input[type="checkbox"] { margin-left: 10px;}
#theme_subcontent input[type="submit"] {margin: 5px 0 5px 0px; padding: 2px 10px; position: absolute; right: 0px; bottom: 0px;
										padding: 2px 10px; background: #F60; color: white;border: 1px #EEE solid;font-weight: bold;
										background: transparent url(../images/login.png) 0 0 no-repeat; text-indent: -10000px;
										width: 77px; height:20px; border: none }
#theme_subcontent input[type="submit"]:hover { background-position: 0px -21px;}

#theme_subcontent .left_block_content > img  {border: none; display: block; width: 150px; margin: 0 auto 10px;  box-shadow: 1px 1px 3px #333;}
#theme_subcontent .left_block_content > p { display: block; width:225px; margin: 0 auto; text-align: center;}
#theme_subcontent .left_block_content > a { color: #fff; display: block; margin: 0 auto; width: 100px; background: #F60; height: 20px; line-height: 20px; text-align:center}
#theme_subcontent .left_block_content > a:hover { color: #333;}

#theme_subcontent input[id="block_search_q"] { margin: 0px; width: 215px;}


/**************** Footer styles ****************/

#footer{ height: 65px; text-align:center;clear:both; width:100%; padding:5px 0; font-size:0.9em; color:#f0f0f0; 
		 background: #333 url(../images/footer_bg) 0 0 repeat;  border-top: 6px solid #C96D00;}
#footer p{padding:0; margin:0; text-align:center;}
#footer a{color:#f0f0f0; background-color:inherit; font-weight:bold;}
#footer a:hover{color:#ffffff; background-color:inherit; text-decoration: underline;}

/* admin style override */
#theme_content div.pn-adminformrow label + ul > li { margin-left: 20.7em;}
#theme_content div.pn-adminformrow label + ul > li:first-child {margin-left: 0em;}

/**************** Misc classes and styles ****************/

.theme_splitcontentleft{float:left; width:48%;}
.theme_splitcontentright{float:right; width:48%;}
.clear{clear:both;}
.small{font-size:0.8em;}
.hide{display:none;}
.textcenter{text-align:center;}
.textright{text-align:right;}
.important{color:#f02025; background-color:inherit; font-weight:bold;}

/**************** images ****************/
img {border:none;}

#slide h4 { display: none;}
#showcase-thumbnail-container, .showcase-button-wrapper { display: none}

#slide .showcase-content-container { padding:0px;}
#slide .showcase-content-wrapper { height: 360px !important;}  /*for 840x285 px*/

#slide .showcase-content-wrapper img { width: 850px!important; height: 340px !important;}
#slide .showcase-arrow-previous, .showcase-arrow-next { top: 145px !important;}

#slide .showcase-arrow-previous,  #slide .showcase-arrow-next{ 
position: absolute; background: url('../images/slide_arrow.png'); width: 33px; height: 67px !important; cursor: pointer;}
#slide .showcase-arrow-previous {left: 34px;}

#slide .showcase-arrow-next { background-position: 34px 0px; right: 31px;}
#slide .showcase-arrow-next:hover { background-position: 34px 68px;}
#slide .showcase-arrow-previous:hover { background-position: 0px 68px;}


/**************** Admin Page ****************/
#pn-maincontent {border-bottom: 6px #999 solid;} 
.z-accountlink { margin: 25px 0 0 0;}

/**************** Reccommend Products ****************/
.recommend_product {}

.recommend_product_list { float:left; margin: 0 6px 20px;}
.recommend_product_image {padding: 1px; height: auto;}
.recommend_product_image a {}
.recommend_product_image img { box-shadow: 1px 1px 3px #333; width: 150px !important;}
.recommend_product_title {text-align: center;}
.recommend_product_title a { display: block; margin-bottom: 5px;}
.recommend_product_price {  color: #FF6600; font-size: 14px; font-weight: bold;}
.recommend_product_price button {	background: transparent url(../images/add_to_cart.png) no-repeat 0 0 ; border: 1px solid #EEEEEE; 
									color: white; font-weight: normal; margin: 5px 0 5px 0; padding: 2px 10px; text-indent: -10000px; width: 80px; height: 24px;}
#theme_subcontent .recommend_product { padding-left: 19px; width: 191px;}
#theme_subcontent .recommend_product_list {	background: #f0f0f0 url(../images/bg_new_product.png) no-repeat 0 0; margin: 0; padding: 16px 20px 6px;
											box-shadow: 1px 1px 3px #777; float:none;}
.recommend_product_price button:hover { background-position: 0px -21px; }

/**************** All Products ****************/
#product_content {}
#product_content h4 { box-shadow: 0 1px 1px #FFF; margin: -16px 0 0;}
#product_content .product_list { 	width: auto !important; margin: 0 !important; padding: 10px; border-bottom: 1px dotted #D2D2D2;
								    background:url("../images/bg_list_product.png") no-repeat scroll 135px 10px transparent;}
#product_content .product_list .column_left { float: left; width: 150px; }
#product_content .product_list .column_left .product_image { box-shadow: 1px 1px 3px #333; width: 150px; height: 100px; display: table-cell !important; vertical-align: middle;}
#product_content .product_list .column_left .product_image img { width: 150px; min-height: 100px; min-width: 150px;}
#product_content .product_list .column_left .product_image .product-reccommend { 	background: url("../images/feature2.png") no-repeat scroll 0 0 transparent; 
     																				position: absolute; display: block; width: 60px; height: 60px;
     																				left: 630px; top: 8px; }

#product_content .product_list .column_right { width: 518px; height: 100px;  padding: 0 0 0 10px; box-shadow: 1px 1px 3px #999999; }
#product_content .product_list .column_right .product_title { float: none; height: 24px;}
#product_content .product_list .column_right .product_title  h1{	background:none; border: none; padding: 0px; line-height: 24px; height: 24px; 
																	box-shadow: none;text-shadow: 1px 1px 1px #990033;}
#product_content .product_list .column_right .product_title  h1 a:hover { color:#FF377C;}
#product_content .product_list .column_right .product_detail{ float:none; width: 500px; height: 47px; padding: 0; overflow:hidden; }
#product_content .product_list .column_right .product_cart { float: none;}
#product_content .product_list .column_right .product_price { 	width: 428px; height: 32px; line-height: 32px; color: #FF6600; padding:0 10px 0 0; 
																font-weight: bold;  text-align: right; }
#product_content .product_list .column_right .product_price  span:nth-child(1),
#product_content .product_list .column_right .product_price  span:nth-child(3){ color: #000;}


#product_content .product_list .column_right .button_cart { background: url("../images/add_to_cart.png") no-repeat scroll 0 0 transparent;
															border: none; color: white; font-weight: normal; margin: 5px 0; padding: 2px 10px;
															text-indent: -10000px; width: 80px;  height: 21px;}
#product_content .product_list .column_right .button_cart:hover { background-position: 0px -21px;}

/**************** All Products ****************/
.jp-container { width: 699px !important;}
.jspPane { width: 701px !important;  padding: 0px !important;}
.jspDrag { background: none repeat scroll 0 0 #FF9900 !important; left: -2px!important; width: 8px !important;}


/**************** Hover Box ****************/
.tooltip { z-index: 100;}
.tooltip .tooltip_head {}
.tooltip .tooltip_content { background: #fff; border: 2px solid #f33; box-shadow: 1px 1px 3px #333; color:#333; text-align:left; padding-top: 5px; }
.tooltip .tooltip_content i { font-weight: bold; padding: 0 0 0 10px;}
.tooltip .tooltip_content span {}
.tooltip .tooltip_content p { padding: 0 0 0 10px;}
.tooltip .tooltip_content p i{ padding: 0px;}
.tooltip .tooltip_content a { 	color: #fff;  font-weight:bold; height: 20px; line-height: 20px; width:100%;  margin-bottom: 0px !important; 
								background: #C00; text-align: center; }
.tooltip .tooltip_footer {}

#theme_subcontent .tooltip .tooltip_content a  { color:#FFF; font-weight:bold;}	
/**************** Images Slice ****************/
#breadcrumb {	background: url("../images/youtube_bg.png") repeat scroll 0 0 #F0F0F0;
   			 	border-bottom: 1px solid #D2D2D2; border-top: 1px solid #D2D2D2;
    			box-shadow: 0 1px 1px #FFFFFF; color: #E27800;
   				font-family: Supermarket; font-size: 22px; font-weight: normal;
    			height: 40px;letter-spacing: 0.3px; line-height: 35px;
    			padding: 0 0 0 15px; text-shadow: 1px 1px 1px #993300;
				margin: -16px 0 0;}
#breadcrumb ul { margin: 0px;}
#breadcrumb ul li {   float: left; list-style: none outside none; margin: 0 0 0 10px;}

#gallery { margin: 0 auto;}
#gallery .ad-image-wrapper { margin-bottom: 0px;}
#gallery .ad-controls {}
#gallery .ad-nav {}

.view_detail p{margin-bottom: 10px; padding: 10px;}

.recommend_product .bx-prev { float:left;}
.recommend_product .bx-next { float:right;}

.left_block_content .button {background: transparent url(../images/search.png) no-repeat 0 0 ; border: none; 
color: white; font-weight: normal; margin: 10px 0 5px 0; padding: 2px 10px; text-indent: -10000px; width: 80px; height: 20px; cursor:pointer;}
.left_block_content .button:hover { background-position: 0px -21px; }

.left_block_content input[name="keyword"] { width: 215px;}
.left_block_content #form_categories_id_ { width: 215px; height: 22px; line-height: 22px; width: 228px;}
.left_block_content #form_categories_id_ option{height: 22px; line-height: 22px;}

.button_cart button_cart_right {}